<template>
  <div>
    <div class="comment-list">
      <div class="comment-item" v-for="item in commentList" :key="item.id">
        <a-row type="flex" :gutter="10">
          <a-col flex="55px"><a-avatar :src="item.headPortrait" :size="45" icon="user"/></a-col>
          <a-col flex="auto">
            <div style="font-size: 12px;">
              {{ item.userNickname }} <a-tag color="#108ee9">{{ item.identityName }}</a-tag>
            </div>
            <div style="color: #999;">{{ item.createTime }}</div>
          </a-col>
        </a-row>
        <a-row type="flex" :gutter="10">
          <a-col flex="55px"></a-col>
          <a-col flex="1">
            <a-row type="flex">
              <a-col flex="1">
                <p style="word-break: break-all;">{{ item.content }}</p>
                <a-alert v-if="item.status == 1" style="font-size: 12px;" type="error" :message="`用户评论已禁用（${item.failReason}；备注：${item.note}，禁用时间：${item.updateTime}）`" banner />
              </a-col>
              <a-col flex="120px" style="text-align:right;">
                <a-icon type="heart" style="color:red" /> {{ item.praiseCount || 0 }}
                <a v-if="item.status == 0" style="color: red;margin-left: 20px;" @click="handleDisable(item)">禁用评论</a>
                <a-popconfirm v-if="item.status == 1" title="确定启用该条评论吗？" @confirm="handleCommentEnable(item)">
                  <a style="color: green;margin-left: 20px;">启用评论</a>
                </a-popconfirm>
                <br />
                <a-popconfirm title="确定删除该条评论吗？" v-if="item.identityId == 1" @confirm="handleCommentDelete(item)">
                  <a style="margin-right: 20px;color: orange;">删除</a>
                </a-popconfirm>
                <a @click="handleCommentAdd(item)">回复</a>
              </a-col>
              <div class="comment-list" style="margin-top: 10px;">
                <template v-if="item.childList && item.childList.length">
                  <div class="comment-item" style="margin-top: 10px;" v-for="child in item.childList.slice(0, childListLimit)" :key="child.id">
                    <a-row type="flex" :gutter="10">
                      <a-col flex="55px"><a-avatar :src="child.headPortrait" :size="45" icon="user"/></a-col>
                      <a-col flex="auto">
                        <div style="font-size: 12px;">
                          {{ child.userNickname }} <a-tag color="#108ee9">{{ child.identityName }}</a-tag>
                        </div>
                        <div style="color: #999;">{{ child.createTime }}</div>
                      </a-col>
                    </a-row>
                    <a-row type="flex" :gutter="10">
                      <a-col flex="55px"></a-col>
                      <a-col flex="1">
                        <a-row type="flex">
                          <a-col flex="1">
                            <p v-if="child.superContent && child.commentId != child.parentId">
                              回复 <span style="color: #999;">{{ child.superUserNickname }}</span> ：<span style="word-break: break-all;">{{ child.superContent }}</span>
                            </p>
                            <p style="word-break: break-all;">{{ child.content }}</p>
                            <a-alert
                              v-if="child.status == 1"
                              style="font-size: 12px;"
                              type="error"
                              :message="`用户评论已禁用（${child.failReason}；备注：${child.note}，禁用时间：${child.updateTime}）`"
                              banner
                            />
                          </a-col>
                          <a-col flex="120px" style="text-align:right;">
                            <a-icon type="heart" style="color:red" /> {{ child.praiseCount || 0 }}
                            <a v-if="child.status == 0" style="color: red;margin-left: 20px;" @click="handleDisable(child)">禁用评论</a>
                            <a-popconfirm v-if="child.status == 1" title="确定启用该条评论吗？" @confirm="handleCommentEnable(child)">
                              <a style="color: green;margin-left: 20px;">启用评论</a>
                            </a-popconfirm>
                            <br />
                            <a-popconfirm title="确定删除该条评论吗？" v-if="child.identityId == 1" @confirm="handleCommentDelete(child)">
                              <a style="margin-right: 20px;color: orange;">删除</a>
                            </a-popconfirm>
                            <a @click="handleCommentAdd(child)">回复</a>
                          </a-col>
                        </a-row>
                      </a-col>
                    </a-row>
                  </div>
                </template>
              </div>
            </a-row>
          </a-col>
        </a-row>
        <div style="text-align: center;margin-top: 10px;">
          <a v-if="item.childList && item.childList.length > childListLimit" @click="showAllComment(item)">展开{{ item.childList.length }}条回复 <a-icon type="down"/></a>
        </div>
      </div>
    </div>
    <a-modal :maskClosable="false" :title="`全部回复（${item.childList && item.childList.length}）`" :visible="visible" width="800px" :footer="null" @cancel="visible = false">
      <div class="comment-list">
        <div class="comment-item">
          <a-row type="flex" :gutter="10">
            <a-col flex="55px"><a-avatar :src="item.headPortrait" :size="45" icon="user"/></a-col>
            <a-col flex="auto">
              <div style="font-size: 12px;">
                {{ item.userNickname }} <a-tag color="#108ee9">{{ item.identityName }}</a-tag>
              </div>
              <div style="color: #999;">{{ item.createTime }}</div>
            </a-col>
          </a-row>
          <a-row type="flex" :gutter="10">
            <a-col flex="55px"></a-col>
            <a-col flex="1">
              <a-row type="flex">
                <a-col flex="1">
                  <p style="word-break: break-all;">{{ item.content }}</p>
                  <a-alert v-if="item.status == 1" style="font-size: 12px;" type="error" :message="`用户评论已禁用（${item.failReason}；备注：${item.note}，禁用时间：${item.updateTime}）`" banner />
                </a-col>
                <a-col flex="120px" style="text-align:right;">
                  <a-icon type="heart" style="color:red" /> {{ item.praiseCount || 0 }}
                  <a v-if="item.status == 0" style="color: red;margin-left: 20px;" @click="handleDisable(item)">禁用评论</a>
                  <a-popconfirm v-if="item.status == 1" title="确定启用该条评论吗？" @confirm="handleCommentEnable(item)">
                    <a style="color: green;margin-left: 20px;">启用评论</a>
                  </a-popconfirm>
                  <br />
                  <a-popconfirm title="确定删除该条评论吗？" v-if="item.identityId == 1" @confirm="handleCommentDelete(item)">
                    <a style="margin-right: 20px;color: orange;">删除</a>
                  </a-popconfirm>
                  <a @click="handleCommentAdd(item)">回复</a>
                </a-col>
                <div class="comment-list" style="margin-top: 10px;" v-if="item.childList">
                  <div class="comment-item" style="margin-top: 10px;" v-for="child in item.childList" :key="child.id">
                    <a-row type="flex" :gutter="10">
                      <a-col flex="55px"><a-avatar :src="child.headPortrait" :size="45" icon="user"/></a-col>
                      <a-col flex="auto">
                        <div style="font-size: 12px;">
                          {{ child.userNickname }} <a-tag color="#108ee9">{{ child.identityName }}</a-tag>
                        </div>
                        <div style="color: #999;">{{ child.createTime }}</div>
                      </a-col>
                    </a-row>
                    <a-row type="flex" :gutter="10">
                      <a-col flex="55px"></a-col>
                      <a-col flex="1">
                        <a-row type="flex">
                          <a-col flex="1">
                            <p v-if="child.superContent && child.commentId != child.parentId">
                              回复 <span style="color: #999;">{{ child.superUserNickname }}</span> ：<span style="word-break: break-all;">{{ child.superContent }}</span>
                            </p>
                            <p style="word-break: break-all;">{{ child.content }}</p>
                            <a-alert
                              v-if="child.status == 1"
                              style="font-size: 12px;"
                              type="error"
                              :message="`用户评论已禁用（${child.failReason}；备注：${child.note}，禁用时间：${child.updateTime}）`"
                              banner
                            />
                          </a-col>
                          <a-col flex="120px" style="text-align:right;">
                            <a-icon type="heart" style="color:red" /> {{ child.praiseCount || 0 }}
                            <a v-if="child.status == 0" style="color: red;margin-left: 20px;" @click="handleDisable(child)">禁用评论</a>
                            <a-popconfirm v-if="child.status == 1" title="确定启用该条评论吗？" @confirm="handleCommentEnable(child)">
                              <a style="color: green;margin-left: 20px;">启用评论</a>
                            </a-popconfirm>
                            <br />
                            <a-popconfirm title="确定删除该条评论吗？" v-if="child.identityId == 1" @confirm="handleCommentDelete(child)">
                              <a style="margin-right: 20px;color: orange;">删除</a>
                            </a-popconfirm>
                            <a @click="handleCommentAdd(child)">回复</a>
                          </a-col>
                        </a-row>
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </a-row>
            </a-col>
          </a-row>
        </div>
      </div>
    </a-modal>
    <a-modal :zIndex="1001" :title="`回复 @${commentItem.userNickname}`" :visible="answerVisible" width="800px" @ok="handleSubmit" @cancel="answerVisible = false">
      <a-form-model ref="rulesForm" :model="form" :rules="rules">
        <a-row type="flex" :gutter="10" key="1">
          <a-col flex="100px">
            <a-select style="width: 100%;" v-model="officialNoId" placeholder="请选择" show-search :filter-option="filterOption">
              <a-select-option :value="0" disabled>官方账号</a-select-option>
              <a-select-option v-for="item in officialNoList" :value="item.id" :key="item.id">{{ item.userNickname }}</a-select-option>
            </a-select>
          </a-col>
          <a-col flex="auto">
            <a-form-model-item prop="content">
              <a-textarea v-model.trim="form.content" :maxLength="2000" placeholder="发表你的回复~" allowClear :rows="4" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
    <DisableModal :visible.sync="disableVisible" :whyList="whyList" @onOk="onOk"></DisableModal>
  </div>
</template>

<script>
import { commentDisable, commentEnable, commentAdd, commentDelete } from '@/api/micromall/communityContent'
import DisableModal from '../components/DisableModal'
import { whyPage } from '@/api/micromall/communityUser'
import { mapGetters } from 'vuex'
export default {
  components: {
    DisableModal
  },
  data() {
    return {
      childListLimit: 1,
      whyList: [],
      disableItem: {},
      itemId: '',
      // item: {},
      commentItem: {},
      visible: false,
      answerVisible: false,
      disableVisible: false,
      // officialNoId: this.parentOfficialNoId,
      form: {
        content: ''
      },
      disableForm: {
        reason: [],
        content: ''
      },
      rules: {
        content: [{ required: true, message: '请输入', trigger: 'blur' }],
        reason: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    }
  },
  props: {
    commentList: {
      type: Array,
      default: []
    },
    officialNoList: {
      type: [Object, Array],
      default: () => {}
    },
    parentOfficialNoId: {
      type: Number,
      default: 0
    }
  },
  computed: {
    item() {
      const commentList = this.commentList.filter(e => e.id == this.itemId)
      return commentList.length ? commentList[0] : {}
     },
    officialNoId: {
      get() {
        return this.parentOfficialNoId
      },
      set(val) {
        this.$emit('update:parentOfficialNoId', val)
      }
    }
  },
  created() {
    this.getWhyPage()
  },
  methods: {
    // 展开全部评论
    showAllComment(item) {
      this.itemId = item.id
      // this.item = item
      this.visible = true
    },

    // 禁用原因
    getWhyPage() {
      // 6:后台-评论禁用
      const data = {
        type: 6,
        status: 0
      }
      whyPage(data).then(res => {
        if (res.code === 200) {
          this.whyList = res.data.records
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    ...mapGetters(['nickname', 'avatar', 'userInfo']),

    // 禁用
    handleDisable(item) {
      this.disableItem = item
      this.disableVisible = true
    },

    // 禁用
    onOk(v) {
      // this.visible = false
      const { note, why } = v
      const data = {
        ...this.disableItem,
        status: '1',
        adminId: this.userInfo().id,
        adminName: this.userInfo().realname,
        appraiseId: this.disableItem.id,
        note: note,
        disableWhy: why.map(e => e.id).join(','),
        failReason: why.map(e => e.whyName).join(',')
      }
      commentDisable(data).then(res => {
        if (res.code === 200) {
          this.$emit('onSuccess')
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 启用
    handleCommentEnable(item) {
      const data = {
        ...item,
        status: '0',
        adminId: this.userInfo().id,
        adminName: this.userInfo().realname,
        appraiseId: item.id
      }
      // this.visible = false
      commentEnable(data).then(res => {
        if (res.code === 200) {
          this.$emit('onSuccess')
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 回复消息
    handleSubmit() {
      this.$refs.rulesForm.validate(valid => {
        const { content } = this.form
        const officialNoList = this.officialNoList.filter(e => this.officialNoId == e.id)
        if (!this.officialNoId) {
          this.$message.info('请选择官方账号')
          return
        }
        if (!officialNoList.length) {
          this.$message.info('官方账号有变动,请重新选择官方账号')
          return
        }
        if (valid) {
          this.answerVisible = false
          // this.visible = false
          const officialNo = officialNoList[0]
          const { id, userNickname, headPortrait } = officialNo
          const { contentId, commentId, parentId } = this.commentItem
          const data = {
            userId: id,
            userNickname,
            headPortrait,
            content,
            status: 0,
            contentId,
            commentId,
            parentId: parentId == '-1' ? commentId : this.commentItem.id
          }
          commentAdd(data).then(res => {
            if (res.code === 200) {
              this.form.content = ''
              this.$emit('onSuccess', this.officialNoId)
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    // 回复
    handleCommentAdd(item) {
      this.answerVisible = true
      this.commentItem = item
    },

    // 删除
    handleCommentDelete(item) {
      const { id, commentId } = item
      const data = {
        id,
        commentId
      }
      // this.visible = false
      commentDelete(data).then(res => {
        if (res.code === 200) {
          this.$emit('onSuccess')
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-checkbox-wrapper {
  margin-left: 0;
  margin-right: 8px;
}
.comment-list {
  width: 100%;
}
.comment-item {
  padding-top: 15px;
  padding-bottom: 10px;
  width: 100%;
  border-bottom: 1px solid #e8e8e8;
}
.comment-list .comment-item:last-child {
  border: none;
}
.comment-list .comment-item:first-child {
  padding-top: 0;
}
</style>
